/* canvas作为点要素的样式设置的 */
/* style start */
function setCanvas(map) {
  let size = 50
  var canvas = document.createElement('canvas')
  canvas.width = size
  canvas.height = size
  let radius = size / 4
  var ctx = canvas.getContext('2d')
  var increase = true
  function draw() {
    /* 清除画布 */
    ctx.clearRect(0, 0, size, size)
    /* 第一个圆 */
    ctx.beginPath()
    ctx.arc(size / 2, size / 2, radius, 0, Math.PI * 2)
    ctx.closePath()
    ctx.fillStyle = 'orange'
    ctx.fill()
    /* 第二个圆 */
    ctx.beginPath()
    ctx.arc(size / 2, size / 2, size / 6, 0, Math.PI * 2)
    ctx.closePath()
    ctx.fillStyle = 'skyblue'
    ctx.fill()
    if (radius > size / 3) {
      increase = false
    } else if (radius < size / 5) {
      increase = true
    }
    if (increase) {
      radius++
    } else {
      radius--
    }
    setTimeout(draw, 100)
    /* render(); canvas和openlayer结合,需要让地图重新渲染 */
    map.render()
  }
  draw()
  return canvas
}

export { setCanvas }
